<template>
  <div class="knowledge">
    <van-form @failed="onFailed" @submit="onSubmit">
      <van-cell-group>
        <van-field
          required
          v-model="form.title"
          type="text"
          placeholder="请输入标题"
          :rules="[{ required: true, message: '请输入标题' }]"
        />
        <van-field
          class="custom_textarea"
          v-model="form.remark"
          type="textarea"
          placeholder="请输入正文"
          :rules="[{ required: false, message: '情况描述' }]"
          rows="16"
          autosize
          maxlength="200"
          show-word-limit
        />
      </van-cell-group>
      <div class="btns">
        <van-button block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const form = reactive({
  title: '',
  remark: '',
});
const onSubmit = (values) => {
  console.log('submit', values);
};
const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};
</script>

<style scoped lang="scss">
.knowledge {
  padding-top: 20px;
  .top {
    margin-top: 25px;
    background: url('@/assets/images/zskBg.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 160px;
  }
  // .custom_textarea {
  ::v-deep .van-field {
    background-color: #f8f8f8;
    margin-bottom: 12px;
    border-radius: 2px 2px 2px 2px;
  }
  // }
}
</style>
